<template>
	<view v-if="Object.keys(userinfo).length !== 0">
		<uni-list-item title="头像" @click="changeUserpic">
			<view class="flex align-center" slot="right">
				<image :src='imageList'
				style="width: 100rpx;height: 100rpx;"
				class="rounded-circle"></image>
				<text class="iconfont icon-bianji1 ml-2"></text>
			</view>
		</uni-list-item>
		<uni-list-item title="昵称">
			<view class="flex align-center" slot="right">
				<input class="uni-input text-right" v-model="list.userinfo.username" />
				<text class="iconfont icon-bianji1 ml-2"></text>
			</view>
		</uni-list-item>
		<uni-list-item title="性别" @click="changeUserinfo('sex')">
			<view class="flex align-center" slot="right">
				<text>{{userinfo['sexArray'][list.sex]}}</text>
				<text class="iconfont icon-bianji1 ml-2"></text>
			</view>
		</uni-list-item>
		<picker mode="date" :value="list.birthday" @change="onDateChange">
			<uni-list-item title="生日">
				<view class="flex align-center" slot="right">
					<text>{{list.birthday|times}}</text>
					<text class="iconfont icon-bianji1 ml-2"></text>
				</view>
			</uni-list-item>
		</picker>
		<uni-list-item title="情感" @click="changeUserinfo('emotion')">
			<view class="flex align-center" slot="right">
				<text>{{userinfo['emotionArray'][list.emotion]}}</text>
				<text class="iconfont icon-bianji1 ml-2"></text>
			</view>
		</uni-list-item>
		<uni-list-item title="职业" @click="changeUserinfo('job')">
			<view class="flex align-center" slot="right">
				<text>{{userinfo['jobArray'][list.job]}}</text>
				<text class="iconfont icon-bianji1 ml-2"></text>
			</view>
		</uni-list-item>
		<uni-list-item title="家乡" @click="showCityPicker">
			<view class="flex align-center" slot="right">
				<text>{{pickerText}}</text>
				<text class="iconfont icon-bianji1 ml-2"></text>
			</view>
		</uni-list-item>
		
		<view class="py-2 px-3">
			<button class="bg-main text-white" style="border-radius: 50rpx;border: 0;" type="primary" @click="submit">完成</button>
		</view>
		
		
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"></mpvue-city-picker>
		
	</view>
</template>

<script>
	import uniListItem from '@/components/uni-ui/uni-list-item/uni-list-item.vue';
	import {getUserData,getUserDataAdd} from "@/network/login.js";
	import mpvueCityPicker from '@/components/uni-ui/mpvue-citypicker/mpvueCityPicker.vue';
	
	
	export default {
		components: {
			uniListItem,
			mpvueCityPicker
		},
		data() {
			return {
				list:[],
				themeColor: '#007AFF',
				cityPickerValueDefault: [0, 0, 1],
				pickerText: '',
				userinfo:{},
				imageList:null
			}
		},
		// 监听返回
		onBackPress() {
		  if (this.$refs.mpvueCityPicker.showPicker) {
		  	this.$refs.mpvueCityPicker.pickerCancel();
		    return true;
		  }
		},
		// 监听页面卸载
		onUnload() {
			if (this.$refs.mpvueCityPicker.showPicker) {
				this.$refs.mpvueCityPicker.pickerCancel()
			}
		},
		onLoad() {
			getUserData().then(attr=>{
				let [err,res] = attr
				this.list = res.data.list[0]
				this.userinfo = res.data.result
				this.imageList = this.list.userinfo.avatar
				this.pickerText = this.list.hometown
			})
		},
		computed: {
			
		},
		methods: {
			showCityPicker(){
				this.$refs.mpvueCityPicker.show()
			},
			// 三级联动提交事件
			onConfirm(e) {
				this.pickerText = e.label
			},
			// 修改生日
			onDateChange(e){
				this.list.birthday = e.detail.value
			},
			// 修改头像
			changeUserpic(){
				let that = this
				uni.chooseImage({
					count:1,
					sizeType:["compressed"],
					sourceType:["album","camera"],
					success: (res) => {
						this.imageList = res.tempFilePaths[0]
					}
				})
			},
			// 情感，职业，性别
			changeUserinfo(type){
				uni.showActionSheet({
				    itemList: this.userinfo[type+'Array'],
				    success:(res)=>{
				        this.list[type] = res.tapIndex
				    }
				});
			},
			// 提交
			submit(){
				if(!this.pickerText){
					uni.showToast({
						title:"请填写家乡",
						icon:"none"
					})
					return
				}
				this.list['hometown'] = this.pickerText
				
				if(this.imageList!==this.list.userinfo.avatar){
					uni.uploadFile({
						url: 'http://192.168.0.102:8000/api/upload/',
						filePath: this.imageList,
						fileType: 'image',
						name: 'data',
						success: (res) => {
							let data_images = JSON.parse(res.data)
							if(data_images.status){
								this.list.userinfo.avatar = "http://192.168.0.102:8000/static/"+data_images.msg
							}
							
						},
						fail: (err) => {
							console.log('uploadImage fail', err);
							uni.showModal({
								content: err.errMsg,
								showCancel: false
							});
						}
					});
				}
				getUserDataAdd(this.list).then(attr=>{
					let [err,res] = attr
					if(res.data.status){
						this.$store.commit("initUserInfo",res.data.data)
						uni.navigateBack({
							delta:1
						})
					}else{
						uni.showToast({
							title:"提交失败",
							icon:"none"
						})
					}
				})
				
				
				
			}
		},
		filters:{
			times(value){
				return new Date(+new Date(value) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
			}
		}
	}
</script>

<style>

</style>
